<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="store">
        <!-- 导航栏 -->
        <div class="store__nav">
            <div class="store__nav__logo">
                <img src="./logo.png" alt="">
            </div>
            <div class="store__nav__list">
                <ul class="list">
                    <li class="list__item">首页</li>
                    <li class="list__item">商品分类</li>
                    <li class="list__item">订单中心</li>
                    <li class="list__item">购物车</li>
                    <li class="list__item">个人中心</li>
                </ul>
            </div>
            <div class="store__nave__login">
                <button class="login button--primary">登录</button>
                <button class="register button--primary">注册</button>

            </div>
        </div>
        <!-- 搜素区域 -->
        <div class="store__search">
            <div class="search-box">
                <div class="search-box_input">
                    <img class="search-icon" src="./search.png" alt="">
                    <input type="text" class="search-input" placeholder="搜索商品">
                    <button class="search-button">搜索</button>
                </div>
                <p class="search-hot">热门搜索:
                    <a href="#">智能手机</a>
                    <a href="#">笔记本电脑</a>
                    <a href="#">运动鞋</a>
                    <a href="#">护肤套装</a>
                </p>
            </div>
        </div>
        <!-- 分类 -->
        <div class="store__category">
            <!-- 分类标题 -->
            <div class="category-title">
                <ul class="category-title_list">
                    <li class="list-item">全部分类</li>
                    <li class="list-item">服装</li>
                    <li class="list-item">数码</li>
                    <li class="list-item">家居</li>
                    <li class="list-item">美妆</li>
                    <li class="list-item">食品</li>
                    <li class="list-item">母婴</li>
                    <li class="list-item">运动</li>
                </ul>

            </div>
            <!-- 分类内容 -->
            <div class="category-content">
                <div class="content-banner">
                    <img src="./banner.png" alt="">
                </div>
                <!-- 特色推荐 -->
                <div class="content-feature">
                    <div class="content-feature-text">
                        特色商品推荐
                    </div>
                    <div class="content-feature-img">
                        <div class="headphones">
                            <img src="./Headphones.png" alt="">
                            <div class="headphones-text">高端无线耳机</div>
                            <div class="heandphones-price">¥1299</div>
                        </div>
                        <div class="watch">
                            <img src="./watch.png" alt="">
                            <div class="watch-text">高端无线耳机</div>
                            <div class="watch-price">¥1299</div>
                        </div>
                        <div class="wallet">
                            <img src="./wallet.png" alt="">
                            <div class="wallet-text">高端无线耳机</div>
                            <div class="wallet-price">¥1299</div>
                        </div>
                        <div class="schoolbag">
                            <img src="./schoolbag.png" alt="">
                            <div class="schoolbag-text">高端无线耳机</div>
                            <div class="schoolbag-price">¥1299</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="store__foot"></div>
    </div>
</body>

</html>